<template>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[2, 3, 4, 5]"
            :small="small" :disabled="disabled" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="store.articleTheme.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup>
import { useCounterStore } from '../pinia/Pinia'
import { ref, onMounted, provide, reactive, watch } from 'vue'
const store = useCounterStore()

const currentPage = ref(1)
const pageSize = ref(4)
const small = ref(false)
const disabled = ref(false)
let CurrentData = reactive(['']);

// 传值给展示数据页面
function valueTransmission() {
    store.renderedData(RenderData(store.articleTheme))

}
const handleSizeChange = (val) => {
    // console.log(`${val} items per page`)
    valueTransmission()
}
const handleCurrentChange = (val) => {
    // console.log(`current page: ${val}`)
    valueTransmission()
}
//渲染当前页面的数据
function RenderData(value) {
    CurrentData = value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
    return CurrentData
}
// 监听总数据源，总数据源发生变化时再调用一次渲染页面的函数
watch(store.articleTheme,(newVaule,old)=>{
    valueTransmission()
})

onMounted(() => {
    valueTransmission()
})
</script>

<style lang="less" scoped>
.background {
    background-color: rgba(0, 0, 0, 0);
}

.el-pagination {
    font-size: 20px;
    color: black;
}

.demo-pagination-block {
    width: 64vw;
    height: 15vh;
    display: flex;
    justify-content: flex-end;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}
</style>